﻿
@{
    ViewData["Title"] = "SuperiorGrid";
}
<div>
<table>
    <tr>
        <td>
            <div id="Barmain" style="width: 550px;height:400px; "></div>
        </td>
        <td>
            <div id="main" style="width: 550px;height:400px;"></div>
        </td>
        <td>
            <div id="Cromain" style="width: 550px;height:400px;"></div>
        </td>
    </tr>
</table>
<br />
    <br /> 
    <div style="height:20px; width:1080px; background-color:lightblue; font-weight:bold; color:black; padding:10px;">待办事件</div>
    <br />
    <table id="ID-table-demo-setRowChecked"></table>
    <div id="pagesbox"></div>
</div>
<script src="~/layui/jquery-3.3.1.js"></script>
<script src="~/echarts.min.js"></script>
<script>

    layui.use(['table', 'laypage', 'layer', 'form'], function () {
        var table = layui.table;
        var laypage = layui.laypage;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer; // 添加layui弹出层模块
    });
    var $ = layui.jquery;
    var laypage = layui.laypage;



    option = {
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [25, 125],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 1
                },
                data: [
                    { value: 40, name: '市容环境' },
                    { value: 38, name: '宣传广告' },
                    { value: 32, name: '街面秩序' },
                    { value: 30, name: '施工管理' },
                    { value: 10, name: '其他事件' },
                ]
            }
        ]
    };

    Baroption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['呼兰街道', '兰河街道', '利民街道', '康金街道'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: [152, 201, 105, 80],
                itemStyle: {
                    color: function (params) {
                        // 定义一个颜色数组
                        let colors = ['#4CAF50', '#2196F3', '#FF9800', '#00BCD4', '#F44336', '#9C27B0', '#E91E63'];
                        return colors[params.dataIndex % colors.length];
                    }
                }
            }
        ]
    };

    Crooption = {
        xAxis: {
            max: 'dataMax'
        },
        yAxis: {
            type: 'category',
            data: ['挂起', '督办', '超期', '结案', '立案', '受理'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            // max: 2 // only the largest 3 bars will be displayed
        },
        series: [
            {
                realtimeSort: true,

                type: 'bar',
                data: [40, 31, 21, 15, 10, 5],
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                },
                itemStyle: {
                    color: function (params) {
                        // 定义一个颜色数组
                        let colors = ['#4CAF50', '#2196F3', '#FF9800', '#00BCD4', '#F44336', '#9C27B0', '#E91E63'];
                        return colors[params.dataIndex % colors.length];
                    }
                }
            }
        ],
        legend: {
            show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
    };

    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option);
    var BarmyChart = echarts.init(document.getElementById('Barmain'));
    BarmyChart.setOption(Baroption);
    var CormyChart = echarts.init(document.getElementById('Cromain'));
    CormyChart.setOption(Crooption);

    var pageSize = 15; // 每页显示条数
    function GetDataList(pageIndex) {
        $.ajax({
            url: 'http://8.140.245.229:8000/WorkBenchRead/api/LOG/GetPE',
            type: 'get',
            dataType: 'json',
            //参数
            data: {
                PageIndex: pageIndex,
                PageSize: pageSize
            },
            success: function (res) {
                //渲染表格数据
                layui.use(['table'], function () {
                    var table = layui.table;
                    table.render({
                        //挂载的表格id
                        elem: '#ID-table-demo-setRowChecked',
                        cols: [[
                            { type: 'numbers', title: '序号', width: 120, align: 'center' },
                            { field: 'EventDesc', title: '事件描述', width: 120, align: 'center' },
                            {
                                field: 'EventLevel', title: '事件级别', width: 120, align: 'center',
                                templet: function (d) {
                                    if (d.EventLevel == 1) {
                                        return '<span>一般</span>'
                                    } else if (d.EventLevel == 2) {
                                        return '<span>紧急</span>'
                                    }
                                }
                            },
                            {
                                field: 'ReportDate', title: '上报时间', width: 120, align: 'center',
                                templet: function (data) { return data.ReportDate.substring(0, 16).replace("T", " ") }
                            },
                            {
                                field: 'ArriveDate', title: '到达时间', width: 120, align: 'center',
                                templet: function (data) { return data.ArriveDate.substring(0, 16).replace("T", " ") }
                            },
                            {
                                field: 'EndTime', title: '处理截止时间', width: 120, align: 'center',
                                templet: function (data) { return data.EndTime.substring(0, 16).replace("T", " ") }
                            },
                            {
                                field: 'WarningState', title: '预警状态', width: 120, align: 'center',
                                templet: function (d) {
                                    if (d.WarningState == 1) {
                                        return '<i class="layui-icon layui-icon-circle-dot" style="font-size: 20px; color: #16b777;"></i>'
                                    } else if (d.WarningState == 2) {
                                        return '<i class="layui-icon layui-icon-circle-dot" style="font-size: 20px; color: #ff5722"></i>'
                                    }
                                }
                            },
                            {
                                field: 'NodeTypeEnum', title: '当前节点', width: 120, align: 'center', templet: function (d) {
                                    if (d.NodeTypeEnum == 1) {
                                        return '<span>立案审核</span>'
                                    } else if (d.NodeTypeEnum == 2) {
                                        return '<span>现场核实</span>'
                                    } else if (d.NodeTypeEnum == 3) {
                                        return '<span>案件核查</span>'
                                    } else if (d.NodeTypeEnum == 4) {
                                        return '<span>案件处置</span>'
                                    }
                                }
                            },
                            { title: '操作', width: 120, align: 'center', templet: '#barDemo', fixed: 'right', unresize: true },
                        ]],
                        data: res.list
                    })
                    laypage.render({
                        //挂载的分页id
                        elem: 'pagesbox',
                        count: res.TotalCount,
                        limit: pageSize,
                        curr: pageIndex,
                        layout: ['count', 'prev', 'page', 'next', 'skip'],
                        jump: function (obj, first) {
                            if (!first) {
                                GetDataList(obj.curr);
                            }
                        }
                    });
                })
            }
        })
    }

    $(function () {
        GetDataList(1);
    })

    // $('#searchBtn').on('click', function () {
    //     GetDataList();
    // });

</script>
 

<script type="text/html" id="barDemo">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">处理</i></a> 
    </div>
</script>